import React,{ Component } from "react";
import {Breadcrumb, Icon, Row, Col, Input, Button, Modal} from 'antd'
import { Link } from 'react-router-dom'
import './ModifyPasswords.less'
import API from '../../api/login'
class PersonList extends Component{
	componentDidMount(){

	}
    modifyPassword = () => {
        let olding = this.refs.passwordOld.input.value
        let newing = this.refs.passwordNew.input.value
        let sure = this.refs.passwordSure.input.value
        if (!olding || !newing || !sure) {
            Modal.warning({
                title: '提示',
                content: '密码不能为空',
                onOk () {
                    console.log(111)
                }
            })
            return
        }
        if (newing !== sure) {
            Modal.warning({
                title: '提示',
                content: '两次密码输入不一致'

            })
            return
        }
        let query = {
            old_pwd: olding,
            password: newing,
            pwd_confirm: sure
        }
        API.modifyPassword(query).then(res => {
            if (res.error === 0) {
                Modal.success({
                    title: '提示',
                    content: '修改成功',
                    onOk () {
                        localStorage.clear()
                        window.location.href = '/login'
                    }
                })
            } else {
                Modal.warning({
                    title: '提示',
                    content: res.msg || '修改失败'

                })
            }
        })
    }
	render(){
		return(
			<div>
				<div className="common-bread">
                    <Breadcrumb style={{ margin: '12px 0' }}>
                        <Breadcrumb.Item>
                            <Link to={`/dashboard`}><Icon type="home" /></Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>管理平台</Breadcrumb.Item>
                        <Breadcrumb.Item>修改密码</Breadcrumb.Item>
                    </Breadcrumb>
				</div>
                <div className="modify-box">
                    <Row>
                        <Col span={2}>旧密码:</Col>
                        <Col span={8}><Input type="password" ref="passwordOld"/></Col>
                    </Row>
                    <Row>
                        <Col span={2}>新密码:</Col>
                        <Col span={8}><Input type="password" ref="passwordNew"/></Col>
                    </Row>
                    <Row>
                        <Col span={2}>确认新密码:</Col>
                        <Col span={8}><Input type="password" ref="passwordSure"/></Col>
                    </Row>
                    <Row>
                        <Col span={2}></Col>
                        <Col span={8} style={{textAlign: 'center'}}><Button type="primary" onClick={this.modifyPassword}>提交</Button></Col>
                    </Row>
                </div>
			</div>
		)
	}
}
export default PersonList;